{% extends 'common/panel.html' %}
{% block head %}

{% endblock head %}
{% block title %}{{array.name}} Spacing Analysis{% endblock title %}
{% block panel %}
	<script type="text/javascript" charset="utf-8">
		
		var spmodhigh;
		var sphigh;
		var spveryhigh;
		var spany;
		
		var on_index = 0;
		
		lingcod.onShow('#sp-mod-high', function() {	
			$('#spacing_no_lop > p > a.no_lop_mpas_link').toggle( 
				function() {
					$('#spacing_no_lop > #no_lop_mpas').show();
				}, 
				function() {	
					$('#spacing_no_lop > #no_lop_mpas').hide(); 
				}
			);
			$('div .temp_spacer').show()
			spmodhigh = kmltree({
	            url: "{% url array_spacing_kmz array.pk session_key 6 %}",
	            gex: gex, 
	            mapElement: $('#map'), 
	            element: $('#sp-mod-high div.tree')
	        });
	        spmodhigh.load();
			$(spmodhigh).bind('kmlLoaded', function(e, kmlObject){
				$('div .temp_spacer').hide()
				turnOnCurrentLayer( $('#sp-mod-high .tree') );
				$('#sp-mod-high > div.tree ul:first > li:first > ul > li > .toggler').click( function() {
					 on_index = $('#sp-mod-high .tree').find('ul:first > li:first > ul > li').index($(this).parent());
				} );
			})
		});
		
		lingcod.onUnhide('#sp-mod-high', function() {
			turnOnCurrentLayer( $('#sp-mod-high .tree') );
		});
		
		lingcod.onShow('#sp-high', function() {
			$('div .temp_spacer').show()
			sphigh = kmltree({
	            url: "{% url array_spacing_kmz array.pk session_key 8 %}",
	            gex: gex, 
	            mapElement: $('#map'), 
	            element: $('#sp-high div.tree')
	        });
	        sphigh.load();
			$(sphigh).bind('kmlLoaded', function(e, kmlObject){
				$('div .temp_spacer').hide()
				turnOnCurrentLayer( $('#sp-high .tree') );
				$('#sp-high > div.tree ul:first > li:first > ul > li > .toggler').click( function() { 
					on_index = $('#sp-high .tree').find('ul:first > li:first > ul > li').index($(this).parent());
				} );
			})
		});
		
		lingcod.onUnhide('#sp-high', function() {
			turnOnCurrentLayer( $('#sp-high .tree') );
		});
		
		lingcod.onShow('#sp-very-high', function() {
			$('div .temp_spacer').show()
			spveryhigh = kmltree({
	            url: "{% url array_spacing_kmz array.pk session_key 10%}",
	            gex: gex, 
	            mapElement: $('#map'), 
	            element: $('#sp-very-high div.tree')
	        });
	        spveryhigh.load();
			$(spveryhigh).bind('kmlLoaded', function(e, kmlObject){
				$('div .temp_spacer').hide()
				turnOnCurrentLayer( $('#sp-very-high .tree') );
				$('#sp-very-high > div.tree ul:first > li:first > ul > li > .toggler').click( function() { 
					on_index = $('#sp-very-high .tree').find('ul:first > li:first > ul > li').index($(this).parent());
				} );
			})
		});
		
		lingcod.onUnhide('#sp-very-high', function() {
			turnOnCurrentLayer( $('#sp-very-high .tree') );
		});
		
		lingcod.onShow('#sp-any', function() {
			$('div .temp_spacer').show()
			spany = kmltree({
	            url: "{% url array_spacing_kmz_null_lop array.pk session_key %}",
	            gex: gex, 
	            mapElement: $('#map'), 
	            element: $('#sp-any div.tree')
	        });
	        spany.load();
			$(spany).bind('kmlLoaded', function(e, kmlObject){
				$('div .temp_spacer').hide()
				turnOnCurrentLayer( $('#sp-any .tree') );
				$('#sp-any > div.tree ul:first > li:first > ul > li > .toggler').click( function() { 
					on_index = $('#sp-any .tree').find('ul:first > li:first > ul > li').index($(this).parent());
				} );
			})
		});
		
		lingcod.onUnhide('#sp-any', function() {
			turnOnCurrentLayer( $('#sp-any .tree') );
		});
		
		lingcod.onHide('#sp-mod-high', function(){
			hideTree($('#sp-mod-high .tree'));
		});
		
		lingcod.onHide('#sp-high', function(){
			hideTree($('#sp-high .tree'));
		});
		
		lingcod.onHide('#sp-very-high', function(){
			hideTree($('#sp-very-high .tree'));
		});
		
		lingcod.onHide('#sp-any', function(){
			hideTree($('#sp-any .tree'));
		});
		
		function hideTree(tree){
			tree.find('ul:first > li.visible > .toggler').click();	
		}
		
		function currentLayer(the_div,onlayer){
			if( !onlayer ){
				onlayer = the_div.find('.tree').find('ul:first > li:first > ul > li.visible');
			}
			return onlayer;
		}
		
		function turnOnCurrentLayer(tree){
			if( ! $( tree.find('ul:first > li:first > ul > li').get(on_index) ).hasClass('visible') ){
				$( tree.find('ul:first > li:first > ul > li > .toggler').get(on_index) ).click();
			}
		}
		/*
		function currentOnIndex(tree){
			var blahblah;
			blahblah = tree.find('ul:first > li:first > ul > li').index(tree.find('ul:first > li:first > ul > li.visible'));
			if (blahblah == -1){
				return on_index
			} else {
				return blahblah
			}
		}
		*/
		lingcod.beforeDestroy(function(){
			if(spmodhigh){
				spmodhigh.destroy();
			}
			if(sphigh){
				sphigh.destroy();
			}
			if(spveryhigh){
				spveryhigh.destroy();
			}
			if(spany){
				spany.destroy();
			}
		});
		
	</script>
	<p>The report on this page pertains to open coast MPA spacing. For information on estuarine replication and spacing, see the <a href="{% url return_active_general_file est_dl.pk %}">{{est_dl.name}}</a>.</p>
	<p>For each habitat in the list below, MPA clusters that count as a replicate will be outlined in yellow.  Gaps between habitat replicates will be shown as either red or
		green lines.  Red lines indicate a gap of more than 100 km (62 miles) while green lines indicate a gap of less than 100 km.</p>
	<br><br>
    <div class="tabs">
		<ul>
			<li><a href="#sp-mod-high"><span>Moderate High</span></a></li>
			<li><a href="#sp-high"><span>High</span></a></li>
			<li><a href="#sp-very-high"><span>Very High</span></a></li>
			<li><a href="#sp-any"><span>Ignore LOP</span></a></li>
		</ul>
		<div id="sp-mod-high" class="spacing_analysis"><div class="tree"></div></div>
		<div id="sp-high" class="spacing_analysis"><div class="tree"></div></div>
		<div id="sp-very-high" class="spacing_analysis"><div class="tree"></div></div>
		<div id="sp-any" class="spacing_analysis"><div class="tree"></div></div>
	</div>
	<div class="temp_spacer"><br><br><br><br><br><br></div>
	{% if array.unassigned_lop_opencoast_mpas %}
		<span id="spacing_no_lop">
		<p>This array contains <a href="#" class="no_lop_mpas_link">{{array.unassigned_lop_opencoast_mpas.count}} open coast MPA{% if array.unassigned_lop_opencoast_mpas.count > 1 %}s{% endif %}</a> with unassigned levels of protection.  Estuarine (non open coast) MPAs are not considered in this analysis.</p>
		{% with array.unassigned_lop_opencoast_mpas as unassigned_mpas %}
			{% include "unassigned_lop_mpas_table.html" %}
		{% endwith %}
		</span>
	{% else %}
		<p>All open coast MPAs in this array received level of protection assignments.  Estuarine (non open coast) MPAs are not considered in this analysis.</p>
	{% endif %}
	<p>Unless you are using the 'Ignore LOP' tab, the validity of these results depend on MarineMap's ability to accurately calculate levels of protection for each MPA.  MarineMap can not calculate a level of protection
		unless all proposed allowed uses are selected from the drop down boxes.  If anything is entered into the "other allowed uses" field, MarineMap will not be able to calculate a level
		of protection.  Due to these limitations, these results should be regarded as preliminary and subject to review by the Science Advisory Team and staff.</p>
{% endblock panel %}